import MyIcon from '@/components/MyIcon';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import { Col, Empty, Row, Timeline, Card } from 'antd';
import { useContext } from 'react';
import { VersionManageAPI } from '../common/type';
import { VersionDetailContext } from '../common/UpdateContext';

export const DetailCheckListView: React.FC<VersionManageAPI.IVersionDetailCheckListView> = () => {
  const {
    prefixCls,
    curRes,
    getVersionDetailData,
    reloadVersionInfo,
  } = useContext(VersionDetailContext);

  /**
   * 处理时间轴左侧时间 和日期换行
   * @param time 传入的时间
   * @returns
   */
  const handleCheckTime = (time: any) => {
    let dateStr: string = '';
    let timeStr: string = '';
    if (time) {
      dateStr = time?.split(' ')?.[0];
      timeStr = time?.split(' ')?.[1];
    }
    return {
      dateStr,
      timeStr,
    };
  };

  /**
   * 处理审核状态颜色
   * @param checkState 传入的当前审核状态
   * @returns
   */
  const checkStateColor = (checkState: any) => {
    let stateColor: any = '';
    if (checkState == 0) {
      stateColor = '#096dd9';
    }
    if (checkState == 1) {
      stateColor = '#52c41a';
    }
    if (checkState == 2) {
      stateColor = '#ff0003';
    }
    if (checkState == 3) {
      stateColor = '#bbbbbb';
    }
    return stateColor;
  };

  return (
    <>
      {getVersionDetailData?.versionCheckList &&
      getVersionDetailData?.versionCheckList?.length > 0 ? (
        <ScrollBarLayout
          style={{
            padding: '0px 10px 5px 0px',
          }}
        >
          <div className={prefixCls + 'tmplTimeline'}>
            <Timeline pending={false} pendingDot={<></>}>
              {getVersionDetailData?.versionCheckList?.map((item: any) => {
                return (
                  <>
                    <Timeline.Item
                      key={item?.id}
                      dot={
                        <MyIcon
                          style={{ fontSize: 18 }}
                          type="icon-time-circle"
                        />
                      }
                    >
                      <Card>
                        <Row className={prefixCls + 'tmplTimeline-contentRow'}>
                          <Col span={24}>
                            <span
                              className={
                                prefixCls + 'tmplTimeline-contantLable'
                              }
                            >
                              <span
                                className={
                                  prefixCls +
                                  'tmplTimeline-contantLable-userInfoText'
                                }
                              >
                                【{item?.checkDepartmentName || '--'}】
                              </span>
                              -
                              <span
                                className={
                                  prefixCls +
                                  'tmplTimeline-contantLable-userInfoText'
                                }
                              >
                                【{item?.checkerName || '--'}】
                              </span>
                              <span
                                className={
                                  prefixCls +
                                  'tmplTimeline-contantLable-userInfoText'
                                }
                              >
                                于&nbsp;
                                {item?.checkTime || '--'}
                              </span>
                              &nbsp; 审核结果：
                              <span
                                style={{
                                  color: checkStateColor(item?.checkState),
                                  fontWeight: 600,
                                }}
                              >
                                {item?.checkState == 0 && '待审核'}
                                {item?.checkState == 1 && '发布'}
                                {item?.checkState == 2 && '驳回'}
                                {item?.checkState == 3 && '作废'}
                              </span>
                            </span>
                          </Col>
                          <Col span={24}>
                            <span
                              className={
                                prefixCls + 'tmplTimeline-contantLable'
                              }
                            >
                              审核意见：
                            </span>
                            <span
                              className={
                                prefixCls +
                                'tmplTimeline-contantLable-userInfoText'
                              }
                            >
                              {item?.checkResult || '--'}
                            </span>
                          </Col>
                        </Row>
                      </Card>
                    </Timeline.Item>
                    <Timeline.Item
                      key={item?.id}
                      dot={
                        <MyIcon
                          style={{ fontSize: 18 }}
                          type="icon-time-circle"
                        />
                      }
                      // className={item?.checkState ? 'ant-timeline-item-laster' : ''}
                    >
                      <Card>
                        <Row className={prefixCls + 'tmplTimeline-contentRow'}>
                          <Col span={24}>
                            <span
                              className={
                                prefixCls + 'tmplTimeline-contantLable'
                              }
                            >
                              <span
                                className={
                                  prefixCls +
                                  'tmplTimeline-contantLable-userInfoText'
                                }
                              >
                                【{item?.applyDepartmentName || '--'}】
                              </span>
                              -
                              <span
                                className={
                                  prefixCls +
                                  'tmplTimeline-contantLable-userInfoText'
                                }
                              >
                                【{item?.applyerName || '--'}】
                              </span>
                              <span
                                className={
                                  prefixCls +
                                  'tmplTimeline-contantLable-userInfoText'
                                }
                              >
                                于&nbsp;
                                {item?.applyTime || '--'}
                              </span>
                              &nbsp; 发起审核
                            </span>
                          </Col>
                          <Col span={24}>
                            <span
                              className={
                                prefixCls + 'tmplTimeline-contantLable'
                              }
                            >
                              申请内容：
                            </span>
                            <span
                              className={
                                prefixCls +
                                'tmplTimeline-contantLable-userInfoText'
                              }
                            >
                              {'发起审核！'}
                            </span>
                          </Col>
                        </Row>
                      </Card>
                    </Timeline.Item>
                  </>
                );
              })}
            </Timeline>
          </div>
        </ScrollBarLayout>
      ) : (
        <Row style={{ height: '100%' }}>
          <Empty
            image={Empty.PRESENTED_IMAGE_SIMPLE}
            style={{ width: '100%' }}
          />
        </Row>
      )}
    </>
  );
};
